// @ts-ignore
import styled from "styled-components";

/**
 * 注意: 为了规范,我们在style文件中,最多只进行两次三元运算,
 * 如果再多或者比较复杂的数据,不可以在style中进行
 * 需要在调用她的一层进行整理后在传递
 */
type propsType ={
  $size?:"small" | "large" | "normal",
  $icon?:Boolean,
  $allowClear:Boolean,
};
const HyInputStyle=styled.div<propsType>`
  position: relative;
  display: flex;
  .hy-input{
    display: block;
    flex: 1;
    outline: none;
    border: 1px solid #d9d9d9;
    border-radius: 10px;
    font-size: ${(props:propsType)=>props.$size==="small"?14:props.$size==="large"?22:18}px;
    padding-top: ${(props:propsType)=>props.$size==="small"?5:props.$size==="large"?15:10}px;
    padding-bottom: ${(props:propsType)=>props.$size==="small"?5:props.$size==="large"?15:10}px;
    padding-left: ${(props:propsType)=>props.$size==="small"?20:props.$size==="large"?34:27}px;
    padding-right: ${(props:propsType)=>props.$size==="small"?20:props.$size==="large"?34:27}px;
    padding: ${(props:propsType)=>props.$icon?"":"10px"};
    transition: all 300ms;
    overflow: hidden;
  }
  .hy-input:focus{
    border: 1px solid var(--theme-color);
    box-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);
  }
  .hy-input:hover{
    border: 1px solid var(--theme-color);
  }
  .input-label{
    display: ${(props:propsType)=>props.$icon?"inline-block":"none"};
    position: absolute;
    font-size: ${(props:propsType)=>props.$size==="small"?12:props.$size==="large"?20:16}px;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
    user-select:none;
  }
  .clear-icon{
    position: absolute;
    display: ${(props:propsType)=>props.$allowClear?"inline-block":"none"};
    font-size: ${(props:propsType)=>props.$size==="small"?12:props.$size==="large"?20:16}px;
    right: 7px;
    top: 50%;
    transform: translateY(-50%);
    user-select:none;
  }
`;
export default HyInputStyle;
